<template>
  <view class="_wrapper _over-hidden _flex">
    <view
      class="_wrapper-y _cart _p20 _box-scroll _over-scroll-hidden"
      style="width: 20%"
    >
      <template v-for="itemLen in 5" :key="itemLen">
        <view class="_flex _flex-wrap _flex-space _flex-start">
          <template
            v-for="itemEl in comEls.filter((item) => item.y_len == itemLen)"
            :key="itemEl.id"
          >
            <view
              class="el-item"
              :class="{ 'el-item-active': itemEl.active }"
              @click="comElActive(itemEl)"
            >
              <image
                :src="$toolImg.img(itemEl.img)"
                :style="elStyle(itemEl)"
              ></image>
            </view>
          </template>
        </view>
      </template>
    </view>
    <view class="_wrapper-y _cart _p20 _box-scroll _over-scroll-hidden">
      <view class="_cart _p5 _flex _flex-start _flex-a-start">
        x:<el-input
          v-model.number="mapLenX"
          style="width: 55px; height: 22px; line-height: 22px"
        />
        y:<el-input
          v-model.number="mapLenY"
          style="width: 55px; height: 22px; line-height: 22px"
        />
      </view>
      <view
        class="_cart _p5 _rel _m-t-10 map-box _font _box-scroll _over-scroll-hidden"
      >
        <template v-for="x in mapLenX" :key="x">
          <template v-for="y in mapLenY" :key="y">
            <view
              class="map-item"
              @click="addMapItem(x - 1, y - 1)"
              :style="mapItemStryle(x - 1, y - 1)"
              >{{ x }}{{ y }}</view
            >
          </template>
        </template>
        <template v-for="item in maps" :key="item.id">
          <view class="map-item" :style="mapItemStryle(item.pos_x, item.pos_y)">
            <image
              :src="$toolImg.img(item.el.img)"
              :style="elStyle(item.el)"
            ></image>
            <view class="map-item-badge" @click="removeMapItem(item.id)"
              >x</view
            >
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import toolAction from "@/tool/http/tool-action";

const gameElementAction = toolAction.init("game_element");
const gameMapTVAction = toolAction.init("game_map_template_view");

export default {
  __option: {
    width: "100%",
  },
  props: ["param"],
  data() {
    return {
      comEls: [],
      maps: [],
      comLen: 30,
      mapLenX: 50,
      mapLenY: 30,
    };
  },
  async mounted() {
    await this.initComEls();
    await this.initMapContent();
  },
  methods: {
    async removeMapItem(id) {
      await gameMapTVAction.remove({ id });
      this.initMapContent();
    },
    async addMapItem(x, y) {
      let elActive = this.comEls.find((item) => item.active == true);
      if (!elActive) {
        return this.$toolUni.toast("请先选择元素！");
      }
      // 规则验证 - 待补充
      await gameMapTVAction.sync({
        pos_y: y,
        pos_x: x,
        map_template_id: this.param.id,
        element_id: elActive.id,
      });
      this.initMapContent();
    },
    async initMapContent() {
      this.maps = await gameMapTVAction.list({
        rules: {
          map_template_id__eq: this.param.id,
        },
      });
      this.maps.forEach((item) => {
        item.el = this.comEls.find((el) => el.id == item.element_id);
      });
    },
    mapItemStryle(x, y) {
      return {
        left: x * this.comLen + "px",
        top: y * this.comLen + "px",
      };
    },
    comElActive(itemEl) {
      this.comEls.forEach((item) => (item.active = false));
      itemEl.active = true;
    },
    elStyle(el) {
      return {
        width: el.x_len * this.comLen + "px",
        height: el.y_len * this.comLen + "px",
      };
    },
    async initComEls() {
      this.comEls = await gameElementAction.list();
    },
  },
};
</script>

<style>
.el-item-active {
  border: 5px solid blue;
}
.map-box {
  background-color: black;
  height: 90%;
}
.map-item {
  width: 30px;
  height: 30px;
  position: absolute;
}
.map-item-badge {
  background-color: red;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  width: 15px;
  height: 15px;
  font-size: 8px;
  line-height: 10px;
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 999;
}
</style>
